import React, { useState } from "react";
import { Button, Tabs } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "../../../hooks/redux";
import { setViewMode } from "../../../store/projectSlice";
import CreateProjectModal from "./CreateProjectModal";

const { TabPane } = Tabs;

const ProjectHeader: React.FC = () => {
  const dispatch = useAppDispatch();
  const { viewMode } = useAppSelector(state => state.project);
  const [createProjectModalVisible, setCreateProjectModalVisible] = useState(false);

  const handleTabChange = (key: string) => {
    dispatch(setViewMode(key as "my_created" | "my_participated"));
  };

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">项目管理</h1>
          <p className="text-gray-600">管理您的项目和任务，提高团队协作效率</p>
        </div>
        <Button
          type="primary"
          size="large"
          icon={<PlusOutlined />}
          onClick={() => setCreateProjectModalVisible(true)}
          className="bg-blue-500 hover:bg-blue-600 border-blue-500 hover:border-blue-600"
        >
          新建项目
        </Button>
      </div>

      <Tabs activeKey={viewMode} onChange={handleTabChange} className="project-header-tabs" size="large">
        <TabPane tab="我创建的" key="my_created" />
        <TabPane tab="我参与的" key="my_participated" />
      </Tabs>

      <CreateProjectModal
        visible={createProjectModalVisible}
        onCancel={() => setCreateProjectModalVisible(false)}
        onSuccess={() => setCreateProjectModalVisible(false)}
      />
    </div>
  );
};

export default ProjectHeader;
